<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Weba Novare</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="client/js/lib/jquery-1.7.1.min.js"/>
        <script type="text/javascript" src="client/js/gui/popup.js"/>
        <script type="text/javascript" src="client/js/gui/popupLogin.js"/>
        <script type="text/javascript" src="client/js/gui/popupGame.js"/>
        <script type="text/javascript">
            function updateChatWindow() {
                var objDiv = document.getElementById("chat");
                objDiv.scrollTop = objDiv.scrollHeight;
                window.setTimeout("updateChatWindow()", 500);
            }
        </script>
    </h:head>
    <h:body onload="updateChatWindow()">
        <ui:include src="/template/header.xhtml" />
        <div class="mainContent">
            <div class="topLeft">
                <div class="games">
                    <table id="gameTable" cellspacing="5">
                        <tr>
                            <th>ID</th>
                            <th>Owner</th>
                            <th>Size</th>
                            <th>Minutes</th>
                            <th>Seconds</th>
                        </tr>
                        <c:forEach var="game" items="#{gamersBean.games}">
                            <c:if test="#{game.opponent == null}">
                                <tr>
                                    <td>#{game.gameId}</td>
                                    <td>#{game.owner.toString()}</td>
                                    <td>#{game.size}</td>
                                    <td>#{game.timeSettings.minutes}</td>
                                    <td>#{game.timeSettings.seconds}</td>
                                    <td>
                                        <c:if test="#{!gamersBean.playing}">
                                            <h:form>
                                                <h:commandButton styleClass="webaNovareBtn" value="Play!" action="#{gamersBean.challenge}">
                                                    <f:param name="gid" value="#{game.gameId}" />
                                                    <f:param name="challenger" value="#{auth.loggedInAs}" />
                                                </h:commandButton>
                                            </h:form>
                                        </c:if>
                                    </td>
                                </tr>
                            </c:if>
                        </c:forEach>
                        <c:if test="#{board.hasOpponent()}" />
                    </table>
                </div>
                <div id="chat">
                    <h:dataTable var="current" value="#{messageBean.textList}">
                        <h:column>
                            #{current}
                        </h:column>
                    </h:dataTable>
                </div>
                <div class="input">
                    <h:form id="chatInputForm">
                        <h:inputText onkeypress="if (event.keyCode == 13) document.getElementById('chatInputForm:sendChatMsg').click();" value="#{text.text}" styleClass="inputMessage"/>
                        <h:commandButton id="sendChatMsg" value="Send" action="#{text.update}" styleClass="sendMessageBtn"/>
                    </h:form>
                </div>
                <div class="create">
                    <c:if test="#{!gamersBean.playing}">
                        <a id="createGame" class="webaNovareBtn">Create game</a>                      
                    </c:if>
                </div>
            </div>
            <div class="users">
                <h2>Users online</h2>
                <form>
                    <h:dataTable var="user" value="#{auth.users}">
                        <h:column>
                            <label onclick="ShowContent('userClicked'); return true;">#{user}</label>
                        </h:column>
                    </h:dataTable>
                </form>
                <div id="userClicked">
                    <ul>
                        <li><a class="userPopup">Challenge</a></li>
                        <li><a class="userPopup" onclick="HideContent('userClicked'); return true;">Close</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div id="popupGameCreate">
            <a id="popupGameClose">x</a>
            <h:form styleClass="createGameForm">
                <h:outputLabel styleClass="registerLoginLabel" value="Language: "/>
                <h:selectOneMenu value="#{gamersBean.language}">
                    <f:selectItem itemLabel="Swedish" itemValue="SV" />
                    <f:selectItem itemLabel="English" itemValue="EN" />
                </h:selectOneMenu><br/><br/>
                
                <h:outputLabel styleClass="registerLoginLabel" value="Minutes: "/>
                <h:selectOneMenu value="#{gamersBean.minutes}">
                    <f:selectItem itemLabel="0m" itemValue="0" />
                    <f:selectItem itemLabel="1m" itemValue="1" />
                    <f:selectItem itemLabel="2m" itemValue="2" />
                    <f:selectItem itemLabel="3m" itemValue="3" />
                    <f:selectItem itemLabel="4m" itemValue="4" />
                    <f:selectItem itemLabel="5m" itemValue="5" />
                    <f:selectItem itemLabel="6m" itemValue="6" />
                    <f:selectItem itemLabel="7m" itemValue="7" />
                    <f:selectItem itemLabel="8m" itemValue="8" />
                </h:selectOneMenu><br/><br/>
                
                <h:outputLabel styleClass="registerLoginLabel" value="Seconds: "/>
                <h:selectOneMenu value="#{gamersBean.seconds}">
                    <!--<f:selectItem itemLabel="0s" itemValue="0" /> -->
                    <f:selectItem itemLabel="15s" itemValue="15" />
                    <f:selectItem itemLabel="30s" itemValue="30" />
                    <f:selectItem itemLabel="45s" itemValue="45" />
                </h:selectOneMenu><br/><br/>
                
                <h:outputLabel styleClass="registerLoginLabel" value="Size: "/>
                <h:selectOneMenu value="#{gamersBean.size}">
                    <f:selectItem itemLabel="3" itemValue="3" />
                    <f:selectItem itemLabel="4" itemValue="4" />
                    <f:selectItem itemLabel="5" itemValue="5" />
                    <f:selectItem itemLabel="6" itemValue="6" />
                </h:selectOneMenu><br/><br/><br/>


                <h:commandButton styleClass="webaNovareBtn" value="Create game" action="#{gamersBean.createGame}">
                    <f:param name="owner" value="#{auth.loggedInAs}" />
                    <f:param name="size" value="5" />
                    <f:param name="minutes" value="2" />
                    <f:param name="seconds" value="30" />
                    <f:param name="language" value="EN" />
                </h:commandButton>
            </h:form>
        </div>
        <div class="footerContainer">
            © Copyright 2012 Weba Novare, Gothenburg, Sweden
        </div>
    </h:body>
</html>
